<template>
  <div class="app-container">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="150px"
             size="medium" @submit.prevent>
      <div class="static-content-item">
        <div>标签页表单</div>
      </div>
      <div class="static-content-item">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <div class="tab-container">
        <el-tabs v-model="tab60554ActiveTab" type="border-card">
          <el-tab-pane name="tab1" label="基础信息">
            <el-form-item label="证照类型" prop="select71563" class="required label-right-align">
              <el-select v-model="formData.select71563" class="full-width-input" clearable>
                <el-option v-for="(item, index) in select71563Options" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业执照照片" prop="pictureupload105740" class="required label-right-align">
              <el-upload :file-list="pictureupload105740FileList" :headers="pictureupload105740UploadHeaders"
                         :data="pictureupload105740UploadData" list-type="picture-card" show-file-list :limit="3">
                <template #tip>
                  <div class="el-upload__tip">营业执照照片</div>
                </template> <template #default><i class="el-icon-plus"></i></template></el-upload>
            </el-form-item>
            <el-form-item label="营业执照有效日期" prop="daterange86805" class="required label-right-align">
              <el-date-picker is-range v-model="formData.daterange86805" type="daterange"
                              class="full-width-input" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="营业执照编号" prop="input16841" class="required label-right-align">
              <el-input v-model="formData.input16841" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="商户地址" prop="cascader105152" class="required label-right-align">
              <el-cascader v-model="formData.cascader105152" class="full-width-input"
                           :options="cascader105152Options" clearable filterable></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="input81225" class="required label-right-align">
              <el-input v-model="formData.input81225" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="店铺经营名称" prop="input30889" class="required label-right-align">
              <el-input v-model="formData.input30889" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="行业类别" prop="select74248" class="required label-right-align">
              <el-select v-model="formData.select74248" class="full-width-input" clearable>
                <el-option v-for="(item, index) in select74248Options" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="店铺经营范围" prop="input56599" class="required label-right-align">
              <el-input v-model="formData.input56599" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="客服电话" prop="input23766" class="required label-right-align">
              <el-input v-model="formData.input23766" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系人邮箱" prop="input117725" class="required label-right-align">
              <el-input v-model="formData.input117725" type="text" clearable></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="营业场所门头" prop="pictureupload55058" class="required label-right-align">
                  <el-upload :file-list="pictureupload55058FileList" :headers="pictureupload55058UploadHeaders"
                             :data="pictureupload55058UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #default><i class="el-icon-plus"></i></template></el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="收银台照片" prop="pictureupload22169" class="required label-right-align">
                  <el-upload :file-list="pictureupload22169FileList" :headers="pictureupload22169UploadHeaders"
                             :data="pictureupload22169UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #default><i class="el-icon-plus"></i></template></el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="店内经营照片" prop="pictureupload60993" class="required label-right-align">
                  <el-upload :file-list="pictureupload60993FileList" :headers="pictureupload60993UploadHeaders"
                             :data="pictureupload60993UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #default><i class="el-icon-plus"></i></template></el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="static-content-item">
              <el-button type="primary">下一步</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="tab-pane-48281" label="商户个人信息">
            <el-row>
              <el-col :span="12" class="grid-cell">
                <el-form-item label="身份证照片正面" prop="pictureupload19913" class="required label-right-align">
                  <el-upload :file-list="pictureupload19913FileList" :headers="pictureupload19913UploadHeaders"
                             :data="pictureupload19913UploadData" list-type="picture-card" show-file-list :limit="3">
                    <template #tip>
                      <div class="el-upload__tip">身份证照片正面</div>
                    </template> <template #default><i class="el-icon-plus"></i></template></el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="grid-cell">
                <el-form-item label="身份证照片反面" prop="pictureupload104362" class="required label-right-align">
                  <el-upload :file-list="pictureupload104362FileList"
                             :headers="pictureupload104362UploadHeaders" :data="pictureupload104362UploadData"
                             list-type="picture-card" show-file-list :limit="3"><template #tip>
                    <div class="el-upload__tip">身份证照片反面</div>
                  </template> <template #default><i class="el-icon-plus"></i></template></el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="姓名" prop="input32814" class="required label-right-align">
              <el-input v-model="formData.input32814" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="input79916" class="required label-right-align">
              <el-input v-model="formData.input79916" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="证件有效期" prop="daterange73144" class="required label-right-align">
              <el-date-picker is-range v-model="formData.daterange73144" type="daterange"
                              class="full-width-input" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable>
              </el-date-picker>
            </el-form-item>
            <el-form-item label="银行卡照片" prop="pictureupload95573" class="required label-right-align">
              <el-upload :file-list="pictureupload95573FileList" :headers="pictureupload95573UploadHeaders"
                         :data="pictureupload95573UploadData" list-type="picture-card" show-file-list :limit="3">
                <template #tip>
                  <div class="el-upload__tip">注：若发卡行为沧州银行、贵阳银行、浙江省农村信用社联合社的暂不支持鉴权，请添加银行卡白名单。</div>
                </template> <template #default><i class="el-icon-plus"></i></template></el-upload>
            </el-form-item>
            <el-form-item label="银行卡号" prop="input21128" class="required label-right-align">
              <el-input v-model="formData.input21128" type="text" clearable></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="总行关键字" prop="input64152" class="label-right-align">
                  <el-input v-model="formData.input64152" type="text" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="支行关键字" prop="input15295" class="label-right-align">
                  <el-input v-model="formData.input15295" type="text" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">检索</el-button>
                </div>
              </el-col>
            </el-row>
            <el-form-item label="选择银行" prop="select93324" class="required label-right-align">
              <el-select v-model="formData.select93324" class="full-width-input" clearable filterable
                         placeholder="通过上方检索出银行">
                <el-option v-for="(item, index) in select93324Options" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="法人手机号" prop="input23552" class="required label-right-align">
              <el-input v-model="formData.input23552" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label=" 受益人" prop="input68790" class="required label-right-align">
              <el-input v-model="formData.input68790" type="text" clearable></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="2" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">下一步</el-button>
                </div>
              </el-col>
              <el-col :span="2" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">上一步</el-button>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="tab-pane-49323" label="费率信息">
            <el-form-item label="费率套餐" prop="select65579" class="label-right-align">
              <el-select v-model="formData.select65579" class="full-width-input" clearable>
                <el-option v-for="(item, index) in select65579Options" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="内卡借记卡(%)：" prop="input26590" class="required label-right-align">
                  <el-input v-model="formData.input26590" type="text" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <el-form-item label="借记卡封顶(元)：" prop="input42230" class="required label-right-align">
                  <el-input v-model="formData.input42230" type="text" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">设置无封顶</el-button>
                </div>
              </el-col>
            </el-row>
            <el-form-item label="内卡贷记卡(%)" prop="input105522" class="required label-right-align">
              <el-input v-model="formData.input105522" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="一千以下银联二维码(%)：" prop="input108364" class="required label-right-align">
              <el-input v-model="formData.input108364" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="微信(%)" prop="input76050" class="required label-right-align">
              <el-input v-model="formData.input76050" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="支付宝(%)" prop="input22600" class="required label-right-align">
              <el-input v-model="formData.input22600" type="text" clearable></el-input>
            </el-form-item>
            <el-form-item label="清算周期" prop="radio16599" class="required label-right-align">
              <el-radio-group v-model="formData.radio16599">
                <el-radio v-for="(item, index) in radio16599Options" :key="index" :label="item.value"
                          :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :span="2" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">上一步</el-button>
                </div>
              </el-col>
              <el-col :span="2" class="grid-cell">
                <div class="static-content-item">
                  <el-button type="primary">提交</el-button>
                </div>
              </el-col>
              <el-col :span="2" class="grid-cell">
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance
}
  from 'vue'
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        select71563: "",
        pictureupload105740: null,
        daterange86805: null,
        input16841: "",
        cascader105152: "",
        input81225: "",
        input30889: "",
        select74248: "",
        input56599: "",
        input23766: "",
        input117725: "",
        pictureupload55058: null,
        pictureupload22169: null,
        pictureupload60993: null,
        pictureupload19913: null,
        pictureupload104362: null,
        input32814: "",
        input79916: "",
        daterange73144: null,
        pictureupload95573: null,
        input21128: "",
        input64152: "",
        input15295: "",
        select93324: "",
        input23552: "",
        input68790: "",
        select65579: "",
        input26590: "",
        input42230: "",
        input105522: "",
        input108364: "",
        input76050: "",
        input22600: "",
        radio16599: null,
      },
      rules: {
        select71563: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload105740: [{
          required: true,
          message: '字段值不可为空',
        }],
        daterange86805: [{
          required: true,
          message: '字段值不可为空',
        }],
        input16841: [{
          required: true,
          message: '字段值不可为空',
        }],
        cascader105152: [{
          required: true,
          message: '字段值不可为空',
        }],
        input81225: [{
          required: true,
          message: '字段值不可为空',
        }],
        input30889: [{
          required: true,
          message: '字段值不可为空',
        }],
        select74248: [{
          required: true,
          message: '字段值不可为空',
        }],
        input56599: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        input23766: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^[1][3-9][0-9]{9}$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        input117725: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload55058: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload22169: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload60993: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload19913: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload104362: [{
          required: true,
          message: '字段值不可为空',
        }],
        input32814: [{
          required: true,
          message: '字段值不可为空',
        }, {
          pattern: /^[一-龥]+$/,
          trigger: ['blur', 'change'],
          message: ''
        }],
        input79916: [{
          required: true,
          message: '字段值不可为空',
        }],
        daterange73144: [{
          required: true,
          message: '字段值不可为空',
        }],
        pictureupload95573: [{
          required: true,
          message: '字段值不可为空',
        }],
        input21128: [{
          required: true,
          message: '字段值不可为空',
        }],
        select93324: [{
          required: true,
          message: '字段值不可为空',
        }],
        input23552: [{
          required: true,
          message: '字段值不可为空',
        }],
        input68790: [{
          required: true,
          message: '字段值不可为空',
        }],
        input26590: [{
          required: true,
          message: '字段值不可为空',
        }],
        input42230: [{
          required: true,
          message: '字段值不可为空',
        }],
        input105522: [{
          required: true,
          message: '字段值不可为空',
        }],
        input108364: [{
          required: true,
          message: '字段值不可为空',
        }],
        input76050: [{
          required: true,
          message: '字段值不可为空',
        }],
        input22600: [{
          required: true,
          message: '字段值不可为空',
        }],
        radio16599: [{
          required: true,
          message: '字段值不可为空',
        }],
      },
      'tab60554ActiveTab': 'tab1',
      select71563Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      cascader105152Options: [{
        "label": "select 1",
        "value": 1,
        "children": [{
          "label": "child 1",
          "value": 11
        }]
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      select74248Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      select93324Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      select65579Options: [{
        "label": "select 1",
        "value": 1
      }, {
        "label": "select 2",
        "value": 2
      }, {
        "label": "select 3",
        "value": 3
      }],
      radio16599Options: [{
        "label": "T+1",
        "value": 1
      }, {
        "label": "D+1",
        "value": 2
      }],
      pictureupload105740FileList: [],
      pictureupload105740UploadHeaders: {},
      pictureupload105740UploadData: {},
      pictureupload55058FileList: [],
      pictureupload55058UploadHeaders: {},
      pictureupload55058UploadData: {},
      pictureupload22169FileList: [],
      pictureupload22169UploadHeaders: {},
      pictureupload22169UploadData: {},
      pictureupload60993FileList: [],
      pictureupload60993UploadHeaders: {},
      pictureupload60993UploadData: {},
      pictureupload19913FileList: [],
      pictureupload19913UploadHeaders: {},
      pictureupload19913UploadData: {},
      pictureupload104362FileList: [],
      pictureupload104362UploadHeaders: {},
      pictureupload104362UploadData: {},
      pictureupload95573FileList: [],
      pictureupload95573UploadHeaders: {},
      pictureupload95573UploadData: {},
    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields()
    }
    return {
      ...toRefs(state),
      submitForm,
      resetForm
    }
  }
})

</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}

</style>
